<template>
  <div class="banner">
    <ul class="relative">
      <li
        v-for="(item, i) in swiper"
        :key="item.advid"
        :style="{ zIndex: index == i ? 9 : -1 }"
      >
        <img
          :src="item.img_url"
          :width="format_size(item.img_size, 'w')"
          :height="format_size(item.img_size, 'h')"
        />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    swiper: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      index: 0,
      time: null,
    };
  },
  methods: {
    format_size(val, type) {
      let arr = val.split("X");
      // console.log(arr);
      if (type == "w") {
        return arr[0];
      } else {
        return arr[1];
      }
    },
  },
  mounted() {
    this.time = setInterval(() => {
      //如果index++的值已经等于大于swiper的长度赋值为0从头开始
      if (this.index >= this.swiper.length) {
        this.index = 0;
      } else {
        this.index++;
      }
    }, 3000);
  },
  beforeDestroy() {
    clearInterval(this.time);
  },
};
</script>

<style lang="scss">
.banner {
  height: 300px;
  ul {
    width: 100%;
    position: relative;
    li {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      img {
        width: 100%;
      }
    }
  }
}
</style>